<template>
  <div class="blog">
    <div class="slide">
      <el-carousel height="500px" direction="vertical" :autoplay="true">
        <el-carousel-item v-for="blog in carouselBlogs" :key="blog.id" @click="$router.push(`/blog/detail/${blog.id}`)" style="cursor:pointer">
          <img :src="blog.cover" alt="" style="object-fit:cover">
          <div class="info">
            <h1 class="title">{{ blog.title }}</h1>
            <p class="content" v-html="blog.content"></p>
            <p class="author">{{ blog.authorName }} | {{ formatTime(blog.createTime) }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="wrapper">
      <div  class="note">
        <div class="title">
          <div class="name"><h2>Latest Blogs ({{ blogs.length }})</h2></div>
          <div class="search">
            <el-input
                v-model="searchWord"
                placeholder="Destination Keyword"
                size="large"
                style="width: 220px"
                clearable
              >
              <template #append>
                <!-- //TODO keyup.enter -->
                <el-button :icon="Search" @click="search()"/>
              </template>
            </el-input>
          </div>
          <div class="button">
            <el-button size="large" type="primary" :icon="Edit" round @click="drawerVisible = true">Write Notes</el-button>
          </div>
        </div>
        <div class="n_content" v-if="blogs.length > 0">
          <ul>
            <li v-for="blog in blogs" :key="blog.id" @click="$router.push(`/blog/detail/${blog.id}`)">
              <div class="left"><img :src="blog.cover" alt=""></div>
              <div class="right">
                <div class="name"><h2>{{ blog.title }}</h2></div>
                <div class="author"><span>{{ blog.authorName }}</span></div>
                <div class="intro ellipsis"><p v-html="blog.content"></p></div>
                <div class="time">Published Date: {{ formatTime(blog.createTime) }}</div>
              </div>
            </li>
          </ul>
        </div>
        <el-empty v-else description="Nothing Found" />
      </div>
    </div>

    <div class="blogForm">
      <el-drawer
          v-model="drawerVisible"
          title="Write a Blog"
          direction="rtl"
          :before-close="handleClose"
          size="50%"
      >
        <el-form :model="blogForm" label-width="100px">
          <el-form-item label="Blog Title" prop="title">
            <el-input v-model="blogForm.title" placeholder="please input title"></el-input>
          </el-form-item>
          <el-form-item label="Blog Cover" prop="cover">
            <FileUpload :imgUrl="blogForm.cover" @FileUpload="handleCoverUpdate"></FileUpload>
          </el-form-item>
          <el-form-item label="Content" prop="content">
            <div class="editor">
              <quill-editor
                  toolbar="full"
                  theme="snow"
                  v-model:content="blogForm.content"
                  contentType="html"
                  style="height: 500px"
              >
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addBlog()">Write</el-button>
            <el-button type="info">Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>
<script setup>
import { blogAddService, blogGetAllService } from '@/api/blog.js';
import { formatTime } from '@/utils/format';
import { Edit, Search } from "@element-plus/icons-vue";
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { onMounted, ref } from 'vue';

const drawerVisible = ref(false)
async function handleClose() {
  await ElMessageBox.confirm('Are you sure to close?', 'Warning', {
    type: 'warning',
    confirmButtonText: 'Yes',
    cancelButtonText: 'No'
  });
  drawerVisible.value = false
}
const blogForm = ref({
  title:'',
  cover:'',
  content:''
})

function handleCoverUpdate(newCover){
  blogForm.value.cover = newCover
}

async function addBlog(){
  await blogAddService(blogForm.value)
  drawerVisible.value = false
  getAllBlogs()
  ElMessage.success("Successfully write a blog")
}

const searchWord = ref("")

const blogs = ref([])
async function getAllBlogs(){
  const res = await blogGetAllService()
  blogs.value = res.data.data
  setCarouselBlogs()
}
onMounted(()=>{
  getAllBlogs()
})

async function search(){
  console.log('search word', searchWord.value);
  const res = await blogGetAllService(searchWord.value)
  blogs.value = res.data.data
}

const carouselBlogs = ref([])


function setCarouselBlogs() {
  carouselBlogs.value = blogs.value.slice(-3)
}




</script>
<style scoped lang="less">
.slide {
  position: relative;
  .info {
    position: absolute;
    bottom: 0px;
    right: 200px;
    width: 520px;
    height: 280px;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);

    h1 {
      width: 500px;
      height: 80px;
      font-weight: 700;
      font-size: 25px;
      color:white
    }

    p {
      width: 500px;
      height: 70px;
      overflow: hidden;
    }

    .author {
      width: 200px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      background-color: skyblue;
      margin-left: 310px;
      margin-top: 40px;
      font-weight: 700;
    }
  }


}

.wrapper {
  .note {
    margin-top: 30px;


    .title {
      display: flex;
      height: 80px;
      line-height: 80px;
      border-bottom: 3px #00a6ed solid;

      .name {
        flex: 1;
        color: #00a6ed;
      }

      .button {
        margin-left: 20px;
      }
    }

    .n_content {
      margin-top: 30px;
      padding: 0 10px;

      li {
        cursor: pointer;
        height: 220px;
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 10px;
        background-color: #f8f8f8;

        .left {
          img {
            width: 300px;
            height: 200px;
            margin-right: 10px;
            border-radius: 10px;
            object-fit: contain;
          }
        }

        .right {
          .name {
            height: 35px;
            margin-bottom: 15px;
            overflow-y: hidden;
          }


          .intro p {
            height: 65px;
            font-size: 15px;
            color: gray;
            margin-top: 10px;
          }
          .ellipsis{
            -webkit-line-clamp: 3;
          }
          .time {
            margin-top: 20px;
            color: gray;
          }
        }
      }
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>